<template>
  <div class="audit-page">
    <div>
      <FileContentSearchHeader
        :searchList="['mediaName']"
        :need-list="['search']"
        @changeSearch="changeSearchMethods"
      ></FileContentSearchHeader>
    </div>
    <CommonTable
      style="margin-top: 15px;"
      class="commonTable"
      ref="auditTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      :t-column-data="auditCol"
      :remote-api="getFileList"
      :query-params="searchObj"
      :is-reserve-select="true"
      operating-width="80px"
      :tHeight="1000"
    >
      <template slot="media_name" slot-scope="scope">
        <div
          class="file-name-row"
          :data-id="scope.row.id"
        >
          <!-- <img src="./images/video.png" class="file-icon" alt=""> -->
          <span :data-id="scope.row.id">
            <a style="color:blue;font-style: italic;" :href="scope.row.media_link" target="_blank">{{scope.row.media_name}}</a>
          </span>
        </div>
      </template>
      <template slot="audit" slot-scope="scope" >
        <span>{{scope.row.audit == 0 ? "待审核" : scope.row.audit == 1 ? "审核通过" : "审核不通过"}}</span>
      </template>
      <template slot="operate" slot-scope="scope" class="operate-btn">
        <el-button type="text" @click="auditFile(scope.row)" v-if="userInfo != null && userInfo.id == 1">审核</el-button>
        <el-button type="text" @click="auditFile(scope.row)" v-if="scope.row.audit == 0 && userInfo != null && userInfo.id != 1">查看</el-button>
        <el-button type="text" @click="editFile(scope.row)" v-if="scope.row.audit != 0 && userInfo != null && userInfo.id != 1">查看</el-button>
      </template>
    </CommonTable>

   <EditFileInfo
      :isAudit="isAudit"
      :show="isShowEditFile"
      :edit-info-form="editForm"
      :mediaType="editForm.mediaType"
      @on-close="isShowEditFile = false;getList()"
    ></EditFileInfo>


    <el-dialog
      title="审核信息"
      v-show="isShowAuditFile"
      :visible.sync="auditShow"
      width="40%"
      :before-close="handleAuditClose">
      <div>
        <el-form ref="form" :model="auditInfoForm" :label-width="auditInfoForm.media_type == 4 ? '140px' : '80px'">
          <el-form-item label="名称">
            <el-input disabled v-model="auditInfoForm.media_name"></el-input>
          </el-form-item>
          <el-form-item label="网址" v-if="auditInfoForm.file_type == 2 && (auditInfoForm.media_type == 5 || auditInfoForm.media_type == 9)">
            <el-input disabled v-model="auditInfoForm.location"></el-input>
          </el-form-item>
          <el-form-item label="路径" v-if="auditInfoForm.file_type == 2 && auditInfoForm.media_type == 4">
            <el-input disabled v-model="auditInfoForm.location"></el-input>
          </el-form-item>
          <el-form-item label="关闭时要清理的进程" v-if="auditInfoForm.file_type == 2 && auditInfoForm.media_type == 4">
            <el-input disabled v-model="auditInfoForm.cleanProcess"></el-input>
            <div>
              注意：添加的应用必须受控终端上提前安装。
            </div>
          </el-form-item>
          <el-form-item label="缩略图" v-if="auditInfoForm.file_type == 2 && auditInfoForm.media_type != 2">
            <template v-if="!auditInfoForm.image">
            </template>
            <div v-else>
              <el-image
                style="width: 100px; height: 100px"
                :src="auditInfoForm.image"
                fit="cover">
              </el-image>
            </div>
          </el-form-item>
          <el-form-item label="文件" v-if="auditInfoForm.file_type == 2 && auditInfoForm.media_type != 5 && auditInfoForm.media_type != 9">

            <template v-if="!auditInfoForm.media_link">

            </template>
            <div v-if="auditInfoForm.media_link && auditInfoForm.media_type == 2">
              <el-image
                style="width: 100px; height: 100px"
                :src="auditInfoForm.media_link"
                fit="cover">
              </el-image>
            </div>
            <div >
              <span class="fileName"><a style="color:blue;font-style: italic;" :href="auditInfoForm.media_link" target="_blank">{{auditInfoForm.media_name}}</a></span>
            </div>
          </el-form-item>

          <el-form-item label="审核记录">
            <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp">
                  <a style="color: #409eff;">{{activity.audit}}</a>
                  <p>{{activity.remark}}</p>
                </el-timeline-item>
              </el-timeline>
          </el-form-item>

          <el-form-item label="审核意见" v-if="userInfo != null && userInfo.id == 1">
            <el-input type="textarea" v-model="remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAuditClose">{{ userInfo != null ? (userInfo.id == 1 ? "取 消" : "关  闭") : ""}}</el-button>
        <el-button type="danger" @click="confirm(2)" v-if="userInfo != null && userInfo.id == 1">拒  绝</el-button>
        <el-button type="primary" @click="confirm(1)" v-if="userInfo != null && userInfo.id == 1">通  过</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Mixins from "@/views/distribute/mixins/mixins";
import CommonTable from "@/components/Table/commonTable";
import {auditCol} from "@/views/audit/tableCol/auditCol";
import * as service from './service'
export default {
  name: "audit",
  mixins: [Mixins],
  components: {
    CommonTable,
  },
  data() {
    return {
      isAudit: true,
      editForm: {},
      isShowEditFile: false,
      reverse: true,
      activities: [],
      remark: "",
      auditShow: false,
      auditInfoForm: {},
      isShowAuditFile: false,
      auditCol,
      searchObj: {
        audit: 0,
        page: 1,
        pageSize: 20
      },
      getFileList: service.getFileList,
      historyRoute: [],
      userInfo: null
    }
  },
  mounted() {
    this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
  },
  watch: {
  },
  methods: {
    confirm(audit) {
      if(audit == 2 && this.remark.replace(" ","") == "") {
        //拒绝状态审核意见不能为空
        this.$message.error('审核意见不能为空')
      } else {
        const params = {
          "id": this.auditInfoForm.audit_id,
          "audit": audit,
          "remark": this.remark
        }
        service.auditMedia(params).then(() => {
          this.$message.success('操作成功')
          this.getList()
          this.isShowAuditFile = false;
          this.auditShow = false;
          this.remark = "";
          this.activities = [];
          this.auditInfoForm = {};
        })
      }
    },
    handleAuditClose(){
      this.isShowAuditFile = false;
      this.auditShow = false;
      this.auditInfoForm = {};
      this.activities = [];
    },
    getList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.auditTableRef.queryData(params);
    },
    changeSearchMethods(msg) {
      this.searchObj = {
        ...this.searchObj,
        ...msg
      }
      this.getList()
    },
    editFile(row) {
      this.isShowEditFile = true
      this.editForm.id = row.id
      this.editForm.groupId = row.groupId || row.group_id
      this.editForm.mediaSuffix = row.media_suffix
      this.editForm.mediaName = row.noSuffixMediaName
      this.editForm.fileType = row.file_type
      this.editForm.mediaType = row.media_type
      this.editForm.image = row.image
      this.editForm.mediaLink = row.media_link
      this.editForm.audit = row.audit
      this.editForm.auditHistory = row.auditHistory
    },
    auditFile(row) {
      this.remark = "";
      this.activities = [];
      this.isShowAuditFile = true;
      this.auditShow = true;
      this.auditInfoForm = row;
      const history = row.auditHistory;
      if(history && history.length > 0) {
        history.forEach(item => {
          let audit = item.audit == 0 ? "待审核" : item.audit == 1 ? "审核通过" : item.audit == 2 ? "审核不通过" : "";
          let obj = {
            audit: audit,
            remark: item.remark,
            timestamp: item.update_date
          }
          this.activities.push(obj);
        })
      }
    }
  }
}

</script>

<style scoped lang="scss">
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    color: #606266;
  }
</style>
